<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css"
	href="/Carrello/css/jquery.treeview.css" />
<script type="text/javascript" src="/Carrello/js/jquery-1.7.js"></script>
<script type="text/javascript" src="/Carrello/js/jquery.treeview.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	
	$("#navigation").treeview({
                animated: "fast",
		persist: "location",
		collapsed: true,
		unique: true
	});
    $('#homeCategories a').click(function(){
        $('#homeCategories a').css('color','#F16C00');
        $('#homeCategories a').css('font-weight','normal');
        $(this).css('color','#000000');
        $(this).css('font-weight','bolder');

    $.ajax({
        type:'POST',
        url: 'browseCategory.action',
        data: {catName : $(this).attr('id')},
        success:function(data){
            $('#homeGrid').html("");
            $('#homeGrid').append(data);
        }
    });
    });

});</script>
<#include "*/general/header.ftl">

	<h3>Main Screen</h3>
	<div id="tableHolder" border="1">
		<table width="100%">
			<tr>
				<td valign="top" width="100">
					<div id="homeCategories">
                                             ${tree}
					</div>
				</td>
				<td valign="top">
                        <div id="homeGrid">
                        <table id="productGridsCell">

                        <#if numOfProducts != 0 >
                                <tr height="60">
                        <#list 0..numOfProducts - 1 as i>
                            <td valign="top"><table height="50">
                                            <tr>
                                                    <td width="200" align="center">
                                                    <img src="http://cs.uga.edu/~haseeb/carrello/${products[i].product_id}.jpg" width="75" height="75"/> <br/>
                                                    <a href="viewproduct.action?productid=${(products[i].product_id)}">
                                                                    ${(products[i].name)}</a></td>
                                            </tr>
                                            <tr>
                                                    <td width="200" align="center">$${(products[i].price)!"
                                                            "}</td>
                                            </tr>
                                    </table></td> <#if (i+1) % 3 == 0>
                        </tr>
                        <tr></#if> 
                        </#list> 
                                </tr>
                        </#if>
                        </table>
                        </div>
				</td>
			</tr>
		</table>
	</div>
	<#include "*/general/footer.ftl">
</body>
</html>
